<template>
  <div>
    <div style="height: 30px"></div>
    <div style="width: 70%; margin-left: 15%">
      <el-form
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="100px"
        :model="ruleForm"
        :rules="rules"
      >
        <el-form-item label="选择头像">
          <div style="width: 179px; height: 117px; border: 1px solid #c0c4cc">
            <el-upload
              action="https://devapi.jbkl.com/api/upload_img"
              class="avatar-uploader"
              :on-success="handleAvatarSuccess"
              :show-file-list="false"
            >
              <img
                v-if="imageUrl"
                class="avatar"
                :src="imageUrl"
                style="width: 179px; height: 117px"
              />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="line-height: 124px; margin-left: 78px"
              ></i>
            </el-upload>
          </div>
        </el-form-item>
        <!-- <el-form-item label="登录手机号" prop="name" style="width: 300px">
          <el-input v-model="ruleForm.username" />
        </el-form-item> -->
        <el-form-item label="真实姓名" prop="" style="width: 300px">
          <el-input v-model="ruleForm.real_name" />
        </el-form-item>
        <el-form-item label="手机号" prop="auth_tel" style="width: 300px">
          <el-input
            v-model.trim="ruleForm.auth_tel"
            maxlength="11"
            show-word-limit
            type="text"
            @input="blurs"
          >
            <template #prefix>
              <vab-icon icon="smartphone-line" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="性别" prop="region">
          <el-select
            v-model="ruleForm.Gender"
            placeholder="请选择"
            @change="GenderChange"
          >
            <el-option
              v-for="(item, index) in GenderOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="角色" prop="">
          <el-select
            v-model="ruleForm.role"
            placeholder="请选择"
            @change="roleChange"
          >
            <el-option
              v-for="item in roleOptions"
              :key="item.id"
              :label="item.role_name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="是否在职" prop="">
          <el-select
            v-model="ruleForm.status"
            placeholder="请选择"
            @change="statusChange"
          >
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="	用户简介" prop="">
          <el-input
            v-model="form.user_desc"
            placeholder="请输入用户简介"
            :rows="2"
            style="width: 50%"
            type="textarea"
          />
        </el-form-item>
        <el-form-item label="	用户简介" prop="">
          <div style="width: 179px; height: 117px; border: 1px solid #c0c4cc">
            <el-upload
              action="https://devapi.jbkl.com/api/upload_img"
              class="avatar-uploader"
              :on-success="handleAvatarSuccessa"
              :show-file-list="false"
            >
              <img
                v-if="imageUrl1"
                class="avatar"
                :src="imageUrl1"
                style="width: 179px; height: 117px"
              />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="line-height: 124px; margin-left: 78px"
              ></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goBack()">返回</el-button>
          <el-button type="primary" @click="establish">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { getDeptLists } from '@/api/addOrganization'
  import { getRoleList } from '@/api/roleManagement'
  import { getGroup } from '@/api/group'
  import { getImg, getGoodsList } from '@/api/public'
  import { addUser, getUserTel } from '@/api/staff'
  export default {
    props: {
      // userid: {
      //   type: Number,
      //   required: true,
      // },
      obj: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        ruleForm: {
          // username: '',
          real_name: '',
          auth_tel: '',
          Gender: '',
          department: [],
          role: '',
          position: [],
          status: '',
          super: '',
          res_fee: '',
          total_fee: '',
          goods: '',
        },
        form: {
          avatar: 'https://devapi.jbkl.com/avatar/default.jpg',
          gender: '',
          status: '',
          // user_desc: '',
          // introduce_image: '',
          role_id: '',
        },

        GenderOptions: [
          { id: 'male', name: '男' },
          { id: 'female', name: '女' },
        ],
        statusOptions: [
          { id: 'on_job', name: '在职' },
          { id: 'quit_job', name: '离职' },
        ],
        schedulingOptions: [
          { id: 'Y', name: '是' },
          { id: 'N', name: '否' },
        ],
        superOptions: [
          { id: 'Y', name: '是' },
          { id: 'N', name: '否' },
        ],
        roleOptions: [],
        value: [],
        departmentOptions: [],
        GroupOptions: [],
        departmentProps: {
          value: 'id',
          label: 'dept_name',
          children: 'children',
          multiple: true,
        },
        avatar: '',
        imageUrl: 'https://devapi.jbkl.com/avatar/default.jpg',
        imageUrl1: '',
        fileList: [],
        rules: {
          auth_tel: [
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '手机号格式错误',
            },
          ],
        },
        state: '',
        commodity: false,
        user_id: 0,
        GoodsOptions: [],
        auth_tel: true,
      }
    },
    watch: {},
    mounted() {
      this.init()
      if (this.obj.ids) {
        // this.ruleForm.username = this.obj.username
        this.ruleForm.auth_tel = this.obj.auth_tel
        this.ruleForm.real_name = this.obj.real_name
        this.imageUrl = this.obj.avatar
        this.form.gender = this.obj.gender
        if (this.obj.gender == 'male') {
          this.ruleForm.Gender = '男'
          this.form.gender = 'male'
        } else {
          this.ruleForm.Gender = '女'
          this.form.gender = 'female'
        }
        this.form.id = this.obj.ids
        if (this.obj.role_name) {
          this.ruleForm.role = this.obj.role_name
          this.form.role_id = this.obj.role_id
        }

        if (this.obj.status == 'on_job') {
          this.ruleForm.status = '在职'
          this.form.status = 'on_job'
        } else {
          this.form.status = 'quit_job'
          this.ruleForm.status = '离职'
        }
      }
      if (this.userid) {
        this.user_id = this.userid
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.form.avatar = res.data
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      handleAvatarSuccessa(res, file) {
        this.form.introduce_image = res.data
        this.imageUrl1 = URL.createObjectURL(file.raw)
      },
      establish() {
        // this.form.username = this.ruleForm.username
        this.form.real_name = this.ruleForm.real_name
        this.form.auth_tel = this.ruleForm.auth_tel
        const jy = {
          avatar: '选择头像',
          // username: '用户名',
          auth_tel: '手机号',
          real_name: '真实姓名',
          gender: '性别',
          user_desc: '用户简介',
          introduce_image: '介绍图片',
          status: '在职离职',
          is_scheduling: '是否参加排班',
          role_id: '角色',
        }

        if (Object.keys(this.form).length === 0) {
          this.$message.error('请填写信息')
          return
        } else {
          for (var key in this.form) {
            if (this.form[key] == '') {
              this.$message.error(jy[key])
              return
            }
          }
        }

        if (this.auth_tel) {
          addUser(this.form).then((res) => {
            if (res.code == 200) {
              this.goBack()
            } else {
              this.$message.error('注册失败')
            }
          })
        } else {
          this.$message.error('该手机号已经注册')
        }
      },
      // 初始化 方法
      init() {
        this.grtRole()
        this.getDepartment()
        this.getGoods()
      },
      // 获取角色
      grtRole() {
        getRoleList().then((res) => {
          this.roleOptions = res.data
        })
      },
      getImg,
      // 获取部门
      getDepartment() {
        getDeptLists().then((res) => {
          this.departmentOptions = res.data
        })
      },
      // 获取商品
      getGoods() {
        getGoodsList().then((res) => {
          this.GoodsOptions = res.data
        })
      },
      // 性别
      GenderChange(e) {
        this.form.gender = e
      },
      // 部门
      handleChange(e) {
        const params = {
          user_id: this.user_id,
          dept_id: e,
        }
        getGroup(params).then((res) => {
          res.data.forEach((e) => {
            if (e.is_partake == 'Y') {
              e.group_name = e.group_name + '(可预约)'
            }
          })

          this.GroupOptions = res.data
        })
        this.form.dept_id = e
      },
      // 角色
      roleChange(e) {
        this.form.role_id = e
      },
      // 职位
      GroupChange(e) {
        this.commodity = false
        // const star = {}
        this.GroupOptions.forEach((res) => {
          if (res.id == e) {
            this.state = res.is_partake
          }
        })

        this.form.group_id = e
      },
      //商品
      GoodsChange(e) {
        if (this.state == 'Y') {
          this.form.goods_id = e
        }
      },
      // 超管

      // // 排班
      // superChange(e) {
      //   this.form.is_scheduling = e
      // },
      // 在职
      statusChange(e) {
        this.form.status = e
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
      blurs(e) {
        if (e.length == 11) {
          const data = {
            auth_tel: e,
          }
          getUserTel(data).then((e) => {
            console.log(e)
            if (!e.data) {
              this.$message.error('该手机号已经注册')
              this.auth_tel = false
            } else {
              this.auth_tel = true
            }
          })
        }
      },
    },
  }
</script>

<style></style>
